<template>
    <div>
        <!--
            :value 和 v-model 的区别，:value是单向的，不会改变 value 的值
            v-model 会改变 value 的值
         -->
        <el-col :cSpan="cSpan" :xs="xs" :sm="sm" :md="md" :lg="lg">
            <el-form-item style="padding-left:10px;" :label="name" :label-width="currentLabelWidth">
                
                <template v-if="currentMode == 'query'">    
                    <el-input :placeholder="placeholder" :value="currentValue" @input="input" size="mini" />
                </template>
                
                <template v-if="currentMode == 'select'">    
                    <cc-select-single :value="currentValue" @input="input" :map="map">
                    </cc-select-single>
                </template>
                
                <template v-if="currentMode == 'multi'">
                    <cc-select-multi :collapse-tags="collapseTags" :value="currentValue" @input="input" :map="map">
                    </cc-select-multi>
                </template>

            </el-form-item>
        </el-col>
        
        <template v-if="currentMode == 'dialog'">
            <el-col :cSpan="12">
                <el-form-item :label="name">
                    <el-input :model="currentValue" @input="input" size="mini" />
                </el-form-item>
            </el-col>
        </template>
    </div>
</template>

<script>
module.exports = {
    data: function() {
        return {
            currentValue: this.value,
            currentMode: 'query',
            currentLabelWidth: this.labelWidth,
            cSpan: 8,
            xs: 10,
            sm: 8,
            md: 7,
            lg: 6
        }
    },
    props: {
        span: Number,
        labelWidth: {
            default: '80px',
            type: String
        },
        placeholder: String,
        mode: String,
        name: '',
        value: '',
        map: Object,
        // 仅多选框该参数有效
        collapseTags: {
            default:true,
            type: Boolean
        }
    },
    created: function() {
        if(this.mode != null) {
            this.currentMode = this.mode;
        } else {
            // console.log('this.map', this.map);
            if(this.map != null) {
                this.currentMode = 'select'
            }
        }
        this.calcLabelWidth();
        if(this.span != null) {
            this.cSpan = this.span;
            this.xs = this.span;
            this.sm = this.span;
            this.md = this.span;
            this.lg = this.span;
        }
    },
    methods: {    
        input: function(inputValue) {
            // 实现双向绑定
            // console.log('input event', inputValue);
            this.$emit('input', inputValue);
        },
        calcLabelWidth: function() {
            if(this.name == null) {
                this.currentLabelWidth = null;
                return;
            }
            var labelLength = this.name.length;
            if(labelLength >= 5 && labelLength <= 8) {
                this.currentLabelWidth =  '130px';
                this.cSpan = this.cSpan + 2;
                this.xs = this.xs + 2;
                this.sm = this.sm + 2;
                this.md = this.md + 2;
                this.lg = this.lg + 2;
            // } else if(labelLength == 5) {
            //     this.currentLabelWidth =  '110px';
            //     this.cSpan = this.cSpan + 1;
            //     this.xs = this.xs + 1;
            //     this.sm = this.sm + 1;
            //     this.md = this.md + 1;
            //     this.lg = this.lg + 1;
            } else {
                this.currentLabelWidth = this.labelWidth;
            }
        }
    },
    watch: {
        // 实现组件显示
        value: function() {
            // console.log('watch value ' + this.value)
            if(this.currentValue != this.value) {
                this.currentValue = this.value;
            }
        }
    }
}
</script>
